<template>
    <div>
        <el-scrollbar>
            <div class="scrollbar-container">
                <div v-for="item in orderDetails" class="detailBar">
                    <el-image></el-image>
                    <div class="detailInfo">
                        <span>{{ item.ProductName }}</span>
                        <span>单价：{{ item.Price }}</span>
                        <span>小计：{{ item.Total }}</span>
                    </div>
                    <div class="count">x{{ item.Count }}</div>
                </div>
            </div>
        </el-scrollbar>
    </div>
</template>

<script setup lang="ts">
    import { ref } from 'vue';
import orderDetailapi from '../api/orderDetailapi';

    const {orderId} = defineProps({
        orderId:{
            type:Number,
            required:true
        }
    })

    const orderDetails = ref<Array<any>>([]);

    orderDetailapi.get(orderId).then(res=>{
        console.log(res);
        
        orderDetails.value = res.data
    });
</script>

<style scoped>
    .container{
    }
    .scrollbar-container{
        width: 100%;
        display: flex;
        flex-direction: column;
        gap:8px 0;
    }
    .detailBar{
        display: flex;
        gap:0 8px;
        align-items: center;
    }
    .detailBar>.el-image{
        align-self: stretch;
        width:40%;
    }
    .detailBar>.detailInfo{
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        gap:8px 0;
        padding:2px 0;
    }
</style>